<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <style>
        ul {
            width: 220px;
            height: 40px;
        }
        
        ul>li {
            width: 40px;
            height: 40px;
            margin-left: 4px;
            float: left;
            color: red;
            font-size: 40px;
            list-style: none;
        }
    </style>
</head>

<body>
    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>
    <script>
        var lis = $("ul li").toArray();
        $("ul li").hover(function() {
            var index = $("ul li").index(this);
            for (var i = 0; i <= index; i++) {
                $(lis[i]).html("★");
            }
            for (var i = lis.length - 1; i > index; i--) {
                $(lis[i]).html("☆");
            }
        })
        $("ul li").click(function() {
            $("ul li").each(function() {
                $(this).removeAttr("clickCurrent");
            })
            $(this).attr("clickCurrent", "current");
        })
    </script>

</body>

</html>